<template>
  <div>
    <hr />
    <el-table @cell-click="cellClick" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
        <template slot-scope="scope">
          <el-select
          v-model="value"
            placeholder="请选择"
            @change="handleChange(scope)"
          >
            <el-option
              :style="{background:item.color}"
              v-for="item in options"
              :key="item.value.value"
              :label="item.label.value"
              :value="JSON.stringify(item)"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <h1>11111</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: { vluae: "选项1", color: "" },
          label: { value: "黄金糕", color: "" },
          color: "yellow"
        },
        {
          value: {value:"选项2",color:""},
          label: { value: "双皮奶", color: "" },
          color: "red"
        },
        {
          value: {value:"选项3",color:""},
          label: { value: "蚵仔煎", color: "" },
          color: "green"
        },
        {
          value: {value:"选项4",color:""},
          label: { value: "龙须面", color: "" },
          color: "blue"
        },
        {
          value: {value:"选项5",color:""},
          label: { value: "北京烤鸭", color: "" },
          color: "pink"
        }
      ],
      value:"",
      tableColor: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    handleChange(scope) {
      console.log("scope: ", scope.row);

    },
    cellClick(row, column, cell, event) {
      document.querySelector(
        "h1"
      ).style = `background-color:${this.tableColor}`;
      console.log("this.tableColor: ", this.tableColor);
      event.style = `background-color:${this.tableColor}`;
      console.log("event: ", event);
      console.log("cell: ", cell);
      console.log("column: ", column);
      console.log("row: ", row);
    }
  },
};
</script>

<style lang="less" scoped>
// /deep/ .my_table_red {
//     /deep/ tr {
//       background: red;
//   }
// }
// /deep/ .my_table_yellow {
//     /deep/ tr {
//       background: yellow;
//   }
// }
// /deep/ .my_table_green {
//     /deep/ tr {
//       background: green;
//   }
// }
// /deep/ .my_table_pink {
//     /deep/ tr {
//       background: pink;
//   }
// }
// /deep/ .my_table_blue {
//     /deep/ tr {
//       background: blue;
//   }
// }
</style>